<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="60%" :title="drawerTitle">
            <Row>
                <Col>
                <Card :shadow="false">
                    <Row>
                        <Form ref="form" :model="form" :label-width="90" :rules="formValidate" style="position:relative">
                            <FormItem label="证书名称" prop="certificateName">
                                <Input v-model="form.certificateName" style="width:600px" placeholder="请输入证书名称"/>
                            </FormItem>
                            <FormItem label="颁证机构" prop="award">
                                <Input v-model="form.award" style="width:600px" placeholder="请输入颁证机构"/>
                            </FormItem>
                            <FormItem label="证书code值" prop="certificateCode" v-if="isAdd">
                                <Input v-model="form.certificateCode" style="width:600px" placeholder="请输入证书code值"/>
                            </FormItem>
                            <FormItem label="证书模板" prop="certificatetemplate">
                                <upload-input :fileUrl="form.certificatetemplate" :fileSize="400" :fileWh="imgSize" @on-change="handleUpload" width="400px" ref="upload"></upload-input>
                            </FormItem>
                            <FormItem label="继续教育" prop="isStudy">
                                <i-switch size="large" v-model="form.isStudy" @on-change="changeEditSwitch" :true-value="1" :false-value="0">
                                    <span slot="open">允许</span>
                                    <span slot="close">拒绝</span>
                                </i-switch>
                            </FormItem>
                            <FormItem label="是否可以用户添加" prop="applyType">
                                <i-switch size="large" v-model="form.applyType" @on-change="changeEditApplySwitch" :true-value="1" :false-value="0">
                                    <span slot="open">允许</span>
                                    <span slot="close">拒绝</span>
                                </i-switch>
                            </FormItem>
                            <FormItem label="学分转换课程" prop="transfer">
                                <RadioGroup v-model="transfer">
                                    <Radio :label="0">不能学分转换</Radio>
                                    <Radio :label="1">需学分转换考试</Radio>
                                    <Radio :label="2">直接申请转换证明</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="可转换学分" prop="score" v-if="transfer != 0">
                                <InputNumber v-model="form.score" style="width:600px"/>
                            </FormItem>
                            <FormItem label="继续教育费用" prop="registrationFee" v-if="isContinue">
                                <InputNumber style="width:600px" :formatter="value  => `¥ ${value }`.replace(/B(?=(d{3})+(?!d))/g, ',')"
                                     :parser="value => value.replace(/¥s?|(,*)/g, '')" :min="1" v-model="form.registrationFee"></InputNumber>
                            </FormItem>
                            <FormItem label="目标学时" prop="tagetPeriod" v-if="isContinue">
                                <InputNumber v-model="form.tagetPeriod" style="width:600px"/>
                            </FormItem>
                            <FormItem label="活动学时至多" prop="offlinePeriod" v-if="isContinue">
                                <InputNumber v-model="form.offlinePeriod" style="width:600px"/>
                            </FormItem>
                            <FormItem label="每场活动获得学时" prop="oncePeriod" v-if="isContinue">
                                <InputNumber v-model="form.oncePeriod" style="width:600px"/>
                            </FormItem>
                            <FormItem label="学习证明" prop="proofImage" v-if="isContinue">
                                <upload-input :fileUrl="form.proofImage" :fileSize="400" :fileWh="imgSize2" @on-change="handleUploadProof" width="400px" ref="upload"></upload-input>
                            </FormItem>
                            <Form-item class="br">
                                <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:100px">提交</Button>
                                <Button @click="handelCancel">取消</Button>
                            </Form-item>
                            <Spin size="large" fix v-if="loading"></Spin>
                        </Form>
                    </Row>
                </Card>
                </Col>
            </Row>
        </Drawer>
    </div>
</template>
<script>
    import {certificateEdit, selectCourse, getStudyData} from "@/api/bus";
    import uploadInput from "@/views/my-components/flyme/upload-input";

    // 表情包配置 自定义表情可在该js文件中统一修改
    import {sina} from "@/libs/emoji";
    export default {
        name: "certificate-drawer",
        components: {
            uploadInput,
        },
        data() {
            return {
                imgSize : "636*443",
                imgSize2 : "636*443",
                type: 0,
                isContinue: true,
                loading: false, // 表单加载状态
                drawerTitle: "编辑平台证书",
                drawerVisible: false,
                isAdd: true,
                transfer: 0,//0不能学分转换1需学分转换考试2直接申请转换证明
                form: {
                    score: 0,
                    industry: '',
                    studyconfigId: '',//继续教育id
                    proofImage: '',//学习证明模板
                    oncePeriod: 0,//活动获得的学时
                    offlinePeriod: 0,//线下学时（活动最多）
                    tagetPeriod: 0,//目标学时
                    registrationFee: 1,//继续教育费用
                    id: '',
                    certificateCode: '',
                    isChange: 0,//学分转换（0不需要学分转换1是）
                    isConvert: 0,//兑换学分是否考试（0直接转换1需要考试转换）
                    isStudy: 1,//是否继续教育
                    applyType: 0,//是否可以用户添加（0不可以1可以）
                    certificatetemplate: "",
                    certificateName: "",
                },
                formValidate: {
                    award: [{required: true, message: "颁证机构不能为空", trigger: "blur"}],
                    certificateCode: [{required: true, message: "证书code不能为空", trigger: "blur"}],
                    certificateName: [{required: true, message: "证书名称不能为空", trigger: "blur"}],
                    tagetPeriod: [{required: true, type: 'number', message: "目标学时不能为空", trigger: "blur"}],
                    offlinePeriod: [{required: true, type: 'number', message: "活动学时至多不能为空", trigger: "blur"}],
                    oncePeriod: [{required: true, type: 'number', message: "每场获得的活动学时不能为空", trigger: "blur"}],
                },
                submitLoading: false, // 添加或编辑提交状态
            };
        },
        methods: {
            showDrawer(params) {
                this.form.industry = params.industry
                this.type=1;
                this.drawerTitle="编辑平台证书";
                this.drawerVisible = true;
                if(params.id){
                    if(params.isChange == 0){
                        this.transfer = 0
                    }else{
                        if(params.isConvert == 0){
                            this.transfer = 2
                        }else{
                            this.transfer = 1
                        }
                    }
                    this.isAdd = false
                    if(params.isStudy == 0){
                        this.isContinue = false
                        this.form = params
                        this.form.isStudy = 0
                    }else{
                        this.isContinue = true
                        this.getData(params)
                        this.form.isStudy = 1
                    }
                }else{
                    this.drawerTitle="新增平台证书";
                    this.isAdd = true
                    this.form.id = ''
                    this.form.score = 0
                    this.form.applyType = 0
                    this.form.certificateCode = ''
                    this.form.isChange = 0
                    this.form.isConvert = 0
                    this.form.isStudy = 1
                    this.form.certificatetemplate = ""
                    this.form.certificateName = ""
                    this.form.studyconfigId = ""
                    this.form.proofImage = ""
                    this.form.oncePeriod = 0
                    this.form.offlinePeriod = 0
                    this.form.tagetPeriod = 0
                    this.form.registrationFee = 1
                }
            },
            getData(params) {
                getStudyData(params.id).then(res => {
                    if (res.status) {
                        params.studyconfigId = res.data.id
                        params.proofImage = res.data.proofImage
                        params.oncePeriod = res.data.oncePeriod
                        params.offlinePeriod = res.data.offlinePeriod
                        params.tagetPeriod = res.data.tagetPeriod
                        params.registrationFee = res.data.registrationFee
                    }
                    this.form = params
                });
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if(this.transfer == 0){
                            this.form.isChange = 0
                        }else{
                            this.form.isChange = 1
                            if(this.transfer == 2){
                                this.form.isConvert = 0
                            }else{
                                this.form.isConvert = 1
                            }
                        }
                        this.submitLoading = true;
                        // 编辑
                        certificateEdit(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.drawerVisible = false;
                                this.$parent.getDataList();
                            }
                        });
                    }
                });
            },
            changeEditSwitch(v) {
                if(v == 0){
                    this.isContinue = false
                }else{
                    this.isContinue = true
                }
            },
            changeEditApplySwitch(v) {
                if(v == 0){
                    this.applyType = false
                }else{
                    this.applyType = true
                }
            },
            handelCancel() {
                this.drawerVisible = false;
            },
            handleUpload(v) {
                this.form.certificatetemplate = v.fileUrl;
            },
            handleUploadProof(v) {
                this.form.proofImage = v.fileUrl;
            }
        },
        mounted() {
        },
        watch: {

        }
    };
</script>